<template>
  <div class="todo">
    <keep-alive>
      <router-view/>
    </keep-alive>
    <div class="title">
      {{date}}  {{name}}
    </div>

    <div class="white-block time-filter" v-if="!this.$route.query.date">
      <span class="label">历史任务</span>
      <!--      <span class="date" v-if="filterDate">2021-01-22 到 2021-02-22</span>-->
      <span class="place" @click="toRecord" >查看明细</span>
    </div>

    <div class="types">
      <div class="desc">已完成/总数量</div>
      <div class="white-block type" @click="toDetail(item)" :class="{done:item.have}" v-for="(item) in types" :key="item.type">
        <span class="type-name">{{item.name}}</span>
        <div class="radios" v-if="!item.have">
          <input @click="toAdd(item.type)" type="radio" :checked="item.have"  :name ="item.name" value="true">
          有
          <input type="radio" class="false" disabled="item.have"  :checked="!item.have"  :name ="item.name" value="false">
          无
        </div>

        <div class="num" v-if="item.have">
          {{item.done}}/{{item.num}}
        </div>

        <div class="check-box"  v-if="item.have">
          <span class="label">筛选</span>
          <input @click.stop type="checkbox" :value="item.type" v-model="filterTypes" name="types">
        </div>

        <div class="del" v-if="item.have&&canEdit" >
          操作
        </div>

<!--        <div class="del" @click.stop="del(item)" v-if="item.have">-->
<!--            删除-->
<!--        </div>-->
        <!--        <span class="week-status" @click="add(item)" v-if="!item.status">无</span>-->
        <!--        <span class="week-status" v-else >有</span>-->
      </div>
      <div class="total white-block">
        <div class="check-box" v-for="(item,index) in statusOptions" :key="index">
          <span class="label">{{item.name}} {{item.num}}</span>
          <input @click.stop type="checkbox" :value="index" v-model="filterStatus"/>
        </div>
      </div>
    </div>
    <div class="todos">
      <div @click="detail(todo)" class="todo white-block" :class="{done:todo.status!=0}" v-for="todo in todoListOther" :key="todo.id">
        <span class="name">{{todo.title}}</span>
        <span class="type">{{typeText[todo.type]}}</span>
        <span class="del" @click.stop="del(todo.id)" v-if="todo.status==0&&canEdit" style="color: red">删除</span>
        <span class="status" v-if="todo.status!=2">{{statusText[todo.status]}}</span>
        <span class="status" v-else>{{todo.score}}分</span>
      </div>
    </div>
    <!--    <div class="btns">-->
    <!--      <div class="left-btn btn">-->
    <!--        修改任务-->
    <!--      </div>-->
    <!--      <div class="right-btn btn">-->
    <!--        历史查询-->
    <!--      </div>-->
    <!--    </div>-->
  </div>
</template>

<script>
import { add, del, getTypes, listByDate } from '@/api/todo'
import { showAlert, showConfirm, showPrompt } from '@/dialog'
import { parseTime } from '@/util/time'
export default {
  activated () {
    // if (!this.$route.query.date) { // 没有传时间就是今日计划
    //   this.date = new Date().toLocaleDateString()
    //   this.name = this.weekName[new Date().getDay()]
    //   listByDate(parseTime(this.date), parseTime(this.date)).then(res => {
    //     this.todos = res.data
    //   })
    //   // 显示未完成
    //   this.filterStatus = [0]
    // } else {

    // }
  },
  beforeRouteEnter: (to, from, next) => {
    if (from.path == '/plan/week' || from.path == '/todo/add' || from.path == '/plan/week') {
      next(vm => {
        vm.init()
      })
    } else {
      next()
    }
  },
  methods: {
    init () {
      this.date = this.$route.query.date
      this.name = this.$route.query.name
      this.planId = this.$route.query.planId
      this.filterTypes = []
      this.filterStatus = []
      this.getTypes()
      this.getTodos()
    },
    getTodos () {
      listByDate(parseTime(this.date), parseTime(this.date)).then(res => {
        this.todos = res.data
      })
    },
    toRecord () {
      this.$router.push({
        path: '/todo/record',
        query: {
          type: 0
        }
      })
    },
    getTypes () {
      getTypes().then(res => {
        this.typeList = res.data
      })
    },
    detail (item) {
      if (item.status == 3) {
        return
      }
      let path = '/todo/visit'
      if (item.type === 0 || item.type === 3) {
        path = '/todo/visit'
        if (item.status !== 0) {
          path = '/score/visit'
        }
      }

      if (item.type === 1 || item.type === 4) {
        path = '/todo/send'
        if (item.status !== 0) {
          path = '/score/send'
        }
      }

      if (item.type === 2 || item.type === 5) {
        path = '/todo/act'
        if (item.status !== 0) {
          path = '/score/act'
        }
      }

      if (item.type === 6 || item.type === 7) {
        path = '/todo/head'
        if (item.status !== 0) {
          path = '/score/head'
        }
      }
      if (item.type === 8) {
        path = '/todo/hunt'
        if (item.status !== 0) {
          path = '/score/hunt'
        }
      }
      if (item.type === 9) {
        path = '/todo/other'
        if (item.status !== 0) {
          path = '/score/other'
        }
      }

      this.$router.push({
        path: path,
        query: { id: item.id }
      })
    },
    del (id) {
      showConfirm('确定删除吗?').then(res => {
        if (res) {
          del(id).then(res => {
            showAlert('操作成功').then(res => {
              this.getTodos()
            })
          })
        }
      })
    },
    // del (item) {
    //   showConfirm('确定删除吗?', '将删除所有未完成项目').then(res => {
    //     if (!res) return
    //     delAll(this.date, item.type).then(() => {
    //       showAlert('操作成功!').then(() => {
    //         this.getTodos()
    //       })
    //     })
    //   })
    // },
    toDetail (item) {
      if (item.have) {
        this.toAdd(item.type)
      }
    },
    toAdd (type) {
      if (type == 8) {
        showAlert('无需创建')
        return
      }
      if (type == 9) {
        showPrompt('输入任务名').then(res => {
          if (!res) {
            return
          }
          add(type, this.planId, parseTime(this.date), [res]).then(res => {
            showAlert('操作成功!').then(res => {
              this.init()
            })
          })
        })
        return
      }
      this.$router.push({
        path: '/todo/add',
        query: {
          planId: this.planId,
          date: this.date,
          type: type,
          name: this.name
        }
      })
    }
  },
  computed: {
    canEdit () {
      return true
      // return new Date(this.date) > new Date()
    },
    statusOptions () {
      const statusOptions = [{
        name: '待完成', num: 0
      },
      {
        name: '待考核', num: 0
      },
      {
        name: '已评分', num: 0
      }
      ]
      this.todos.forEach(todo => {
        if (statusOptions[todo.status]) {
          statusOptions[todo.status].num++
        }
      })
      return statusOptions
    },
    types () {
      // const types = [
      //   { name: '药店拜访', have: false, type: 0, num: 0, done: 0 },
      //   { name: '试用装发放', have: false, type: 1, num: 0, done: 0 },
      //   { name: '促销活动', have: false, type: 2, num: 0, done: 0 }
      // ]
      const types = this.typeList.map((m, k) => {
        return { name: m.name, have: false, type: m.value, num: 0, done: 0 }
      })
      types.forEach(type => {
        type.num = 0
        type.have = false
        this.todos.forEach(todo => {
          // 筛选类型
          if (todo.type === type.type) {
            type.have = true
            type.num++
            if (todo.status == 1 || todo.status == 2 || todo.status == 4) {
              type.done++
            }
          }
        })
      })
      return types
    },
    todoListOther () {
      return this.todos.filter(todo => {
        let statusFlag = true
        let typeFlag = true
        if (this.filterStatus.length > 0) {
          statusFlag = this.filterStatus.indexOf(todo.status) > -1
        }
        if (this.filterTypes.length > 0) {
          typeFlag = this.filterTypes.indexOf(todo.type) > -1
        }
        return typeFlag && statusFlag
      })
    }
  },
  data () {
    return {
      typeList: [],
      weekName: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      typeText: ['拜访', '发放', '活动', '拜访-帮带', '发放-帮带', '活动-帮带', '总部拜访', '连锁开发', '人员招聘', '其它'],
      statusText: ['待完成', '已完成', '待考核', '已删除', '待评分'],
      filterTypes: [],
      filterStatus: [],
      todos: [],
      name: null,
      date: null,
      planId: null
    }
  }
}
</script>

<style scoped lang="stylus">
.check-box
  display flex
  align-items center
  justify-content center
  .label
    margin-right 10px
.todo
  padding 10px 10px
  .title
    width 100%
    height 60px
    color #55545D
    font-size 22px
    display flex
    justify-content center
    align-items center
    box-shadow: 0px 3px 7px 0px rgba(89, 88, 87, 0.52);

  .time-filter
    padding 0 10px
    font-size 18px
    color #55545D
    display flex
    justify-content space-between
    align-items center
    margin-top 20px

    .place
      font-size 16px
      color red
  .types
    border-top 1px solid #ECEAEA
    margin-top 20px
    padding-bottom 20px
    .desc
      display flex
      align-items center
      justify-content center
      font-size 10px
      color #989898
      padding 10px 0
    .total
      display flex
      align-items center
      justify-content space-between
      padding 0 10px
      font-size 14px
      color #55545D
    .type
      margin-bottom 10px
      display flex
      align-items center
      justify-content space-between
      padding 0 10px
      font-size 14px
      background-color #ECEAEA
      color #55545D
      .type-name
        min-width 80px
      .del
        color red
      .type-edit
        color red
      .radios
        display flex
        align-items center
        input
          margin-right 10px
        .false
          margin-left 20px
      &.done
        background-color white
      .week-date
        color #595857
  .btns
    font-size 18px
    color #55545D
    display flex
    justify-content space-between
    position fixed
    bottom 10px
    left 0
    right 0
    padding 0 10px
    .btn
      background-color white
      border 1px 1px 1px 1px solid #595857
      box-shadow: 0px 3px 7px 0px rgba(89, 88, 87, 0.52);
      width 100px
      height 40px
      display flex
      justify-content center
      align-items center
  .todos
    border-top 1px solid #ECEAEA
    padding-top 20px
    .todo
      font-size 14px
      color #55545D
      display flex
      align-items center
      justify-content space-between
      padding 0 10px
      margin-bottom 10px
      &.done
        background-color #ECEAEA
</style>
